<template>
    <div class="todo-list">
      <h3>待办事项列表</h3>
      <div class="add-todo">
        <input 
          v-model="newTodoTitle" 
          @keyup.enter="addTodo"
          placeholder="输入待办事项并按回车"
        />
      </div>
      <TodoItem
        v-for="(todo, index) in todos"
        :key="index"
        :title="todo.title"
        :completed="todo.completed"
        @update:completed="updateTodoCompleted(index, $event)"
        @remove-todo="removeTodo(index)"
      />
    </div>
  </template>
  
  <script>
  import TodoItem from './TodoItem.vue'
  
  export default {
    name: 'TodoList',
    components: {
      TodoItem
    },
    data() {
      return {
        todos: [],
        newTodoTitle: ''
      }
    },
    methods: {
      addTodo() {
        if (this.newTodoTitle.trim()) {
          this.todos.push({
            title: this.newTodoTitle.trim(),
            completed: false
          })
          this.newTodoTitle = ''
        }
      },
      removeTodo(index) {
        this.todos.splice(index, 1)
      },
      updateTodoCompleted(index, completed) {
        this.todos[index].completed = completed
      }
    }
  }
  </script>
  
  <style scoped>
  .todo-list {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .add-todo input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
  }
  </style>